<template>
  <div class="form-section" v-if="formData.type === 'index'">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" v-if="!isApi">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.select_type', '选择类型')"
          prop="config.index.select_type"
        >
          <el-radio-group v-model="formData.config.index.select_type">
            <el-radio value="checkbox">复选</el-radio>
            <el-radio value="radio">单选</el-radio>
            <el-radio value="none">无</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.page_size', '页大小')"
          prop="config.index.page_size"
        >
          <el-input v-model="formData.config.index.page_size" />
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.order_by', '排序规则')"
          prop="config.index.order_by"
        >
          <el-input v-model="formData.config.index.order_by" />
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" v-if="!isApi">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.search_bar', '搜索栏')"
          :tooltipContent="
            $t('menu.dev.action.tip.search_bar', '默认是否显示搜索栏')
          "
          prop="config.index.search_bar"
        >
          <el-radio-group v-model="formData.config.index.search_bar">
            <el-radio value="show"> 显示(show)</el-radio>
            <el-radio value="hidden"> 隐藏(hide)</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
      <el-col :span="24">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.filter', '侧栏搜索')"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.filter',
              '请填写搜索字段和SQL查询，格式：搜寻字段|SQL查询',
            )
          "
          prop="config.index.filter"
        >
          <el-input
            v-model="formData.config.index.filter"
            type="textarea"
            placeholder="格式：class_id | select id as value,name as label from class where status=1"
          />
          <el-link type="primary" @click="fillSQL" class="font-200 text-12px"
            >SQL查询模板
          </el-link>
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          label="数据权限"
          prop="config.index.is_permission"
          tooltipContent="是否根据用户的数据权限返回SQL查询的字典数据"
        >
          <el-radio-group v-model="formData.config.index.is_permission">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.tree_config', '树表配置')"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.tree_config',
              '格式已当前菜单查询为准设置：主键列，父类列，显示列，例：id | pid | name',
            )
          "
          prop="config.index.tree_config"
        >
          <el-input
            v-model="formData.config.index.tree_config"
            placeholder="格式：id | pid | name"
          />
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

const route = useRoute();
const isApi = computed(() => route.query.app === 'api');

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
});

const fillSQL = () => {
  if (props.formData.config.index.is_permission === 1) {
    props.formData.config.index.filter =
      'class_id | select id as value,name as label, create_id, create_dept from class where status=1';
  } else {
    props.formData.config.index.filter =
      'class_id | select id as value,name as label from class';
  }
};
</script>

<style lang="scss" scoped></style>
